
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>后台首页</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<link rel="stylesheet" href="css/admin_myLayui.css">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">
			<div class="layui-logo">layui 后台布局</div>
			<!-- 头部区域（可配合layui已有的水平导航） -->
			<ul class="layui-nav layui-layout-left">
				<li class="layui-nav-item"><a href="">控制台</a></li>
				<li class="layui-nav-item"><a href="">商品管理</a></li>
				<li class="layui-nav-item"><a href="">用户</a></li>
				<li class="layui-nav-item"><a href="javascript:;">其它系统</a>
					<dl class="layui-nav-child">
						<dd>
							<a href="">邮件管理</a>
						</dd>
						<dd>
							<a href="">消息管理</a>
						</dd>
						<dd>
							<a href="">授权管理</a>
						</dd>
					</dl></li>
			</ul>
			<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item"><a href="javascript:;"> <img
						src="http://t.cn/RCzsdCq" class="layui-nav-img"> 贤心
				</a>
					<dl class="layui-nav-child">
						<dd>
							<a href="">基本资料</a>
						</dd>
						<dd>
							<a href="">安全设置</a>
						</dd>
					</dl></li>
				<li class="layui-nav-item"><a href="">退了</a></li>
			</ul>
		</div>

		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
				<ul class="layui-nav layui-nav-tree" lay-filter="test">
					<li class="layui-nav-item layui-nav-itemed"><a class=""
						href="javascript:;">用户信息</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="useradd.jsp">增加用户</a>
							</dd>
							<dd>
								<a href="javascript:;">列表二</a>
							</dd>
							<dd>
								<a href="javascript:;">列表三</a>
							</dd>
							<dd>
								<a href="">超链接</a>
							</dd>
						</dl></li>
					<li class="layui-nav-item"><a href="javascript:;">公寓信息</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="houseadd.jsp">房屋增加</a>
							</dd>
							<dd>
								<a href="javascript:;">列表二</a>
							</dd>
							<dd>
								<a href="">超链接</a>
							</dd>
						</dl></li>
					<li class="layui-nav-item"><a href="fix.jsp">故障内容</a></li>
					<li class="layui-nav-item"><a href="">发布商品</a></li>
				</ul>
			</div>
		</div>

		<div class="layui-body">
			<!-- 内容主体区域 -->
			<div style="padding: 15px;">
				<!-- 该处为搜索框 -->
				<div class="demoTable">
					搜索ID：
					<div class="layui-inline">
						<input class="layui-input" name="id" id="demoReload"
							autocomplete="off">
					</div>
					<button class="layui-btn" data-type="reload">搜索</button>
				</div>

				<table class="layui-hide" id="test" lay-filter="test"></table>

				<script type="text/html" id="toolbarDemo">
                       <div class="layui-btn-container">
                             <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                             <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                             <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
                       </div>
                </script>

				<script type="text/html" id="barDemo">
                     <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                     <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                </script>


				<script src="layui/layui.js" charset="utf-8"></script>
				<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

				<script>
					layui
							.use(
									['table','form'],
									function() {
										var table = layui.table;

										table
												.render({
													elem : '#test',
													url : 'as.do',
													toolbar : '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
													,
													defaultToolbar : [
															'filter',
															'exports',
															'print',
															{ //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
																title : '提示',
																layEvent : 'LAYTABLE_TIPS',
																icon : 'layui-icon-tips'
															} ],
													title : '用户数据表',
													cols : [ [
															{
																type : 'checkbox',
																fixed : 'left'
															},
															{
																field : 'userId',
																title : '编号',
																width : 80,
																fixed : 'left',
																unresize : true,
																sort : true
															},
															{
																field : 'userName',
																title : '用户名',
																width : 150,
																edit : 'text'
															},
															{
																field : 'userPwd',
																title : '密码',
																width : 314,
																edit : 'text',
																templet : function(
																		res) {
																	return '<em>'
																			+ res.userPwd
																			+ '</em>'
																}
															},
															{
																field : 'userSex',
																title : '性别',
																width : 150,
																edit : 'text',
																sort : true
															},
															{
																field : 'userTel',
																title : '联系电话',
																width : 150
															},
															{
																field : 'houseName',
																title : '公寓名称',
																width : 150
															},
															{
																field : 'userDoorNO',
																title : '房间编号',
																width : 150
															},
															{
																field : 'userDate',
																title : '入住时间',
																width : 150
															},
															{
																field : 'userState',
																title : '用户状态',
																width : 150
															},
															{
																fixed : 'right',
																title : '操作',
																toolbar : '#barDemo',
																width : 150
															} ] ],
													page : true,
													id : 'testReload'
												});

										//模糊查询开始
										var $ = layui.$, active = {
											reload : function() {
												var demoReload = $('#demoReload');

												//执行重载
												table.reload('testReload', {
													page : {
														curr : 1
													//重新从第 1 页开始
													},
													where : {
									 					"strLike" : demoReload
																.val()
													}
												}, 'data');
											}
										};
										$('.demoTable .layui-btn').on(
												'click',
												function() {
													var type = $(this).data(
															'type');
													active[type] ? active[type]
															.call(this) : '';
												});
										//结束

										//头工具栏事件
										table
												.on(
														'toolbar(test)',
														function(obj) {
															var checkStatus = table
																	.checkStatus(obj.config.id);
															switch (obj.event) {
															case 'getCheckData':
																var data = checkStatus.data;
																layer
																		.alert(JSON
																				.stringify(data));
																break;
															case 'getCheckLength':
																var data = checkStatus.data;
																layer
																		.msg('选中了：'
																				+ data.length
																				+ ' 个');
																break;
															case 'isAll':
																layer
																		.msg(checkStatus.isAll ? '全选'
																				: '未全选');
																break;

															//自定义头工具栏右侧图标 - 提示
															case 'LAYTABLE_TIPS':
																layer
																		.alert('这是工具栏右侧自定义的一个图标按钮');
																break;
															}
															;
														});
										
										//监听表单提交
			layui.form.on('submit(demo1)',function(data){
				$.ajax({
					url:"as.do?op=update",
					type:"post",
					contentType:"application/json",
					data:JSON.stringify(data.field),
					success:function(data){
						console.log(data);
						layer.msg(data == "true"?"操作失败!":"操作成功!",{icon:1},function(){
							parent.layer.closeAll();
							location.reload();
						});
					} 
				})
				return false;//阻止表单自动提交
				});
										

										//监听行工具事件
										table
												.on(
														'tool(test)',
														function(obj) {
															var data = obj.data;
															console.log(obj)
															if (obj.event === 'del') {
																layer
																		.confirm(
																				'真的删除['
																						+ data.userName
																						+ ']么',
																				function(
																						index) {
																					$
																							.post(
																									"as.do",
																									"op=del&id="
																											+ data.userId,
																									function(
																											data) {
																										layer
																												.msg(
																														data == "true" ? "操作失败！"
																																: "操作成功！",
																														{
																															icon : 1
																														});
																										console
																												.log(data);
																										console
																												.log(data.id);
																										obj
																												.del();
																										layer
																												.close(index);
																									})
																				});
															} else if (obj.event === 'edit') {
																$("#userId").val(data.userId);
																$("#username").val(data.userName);
																$("#userpwd").val(data.userPwd);
																if(data.userSex =='女'){
																	$("input[name='sex'][value='女']").prop("checked",true);
																}
																else{
																	$("input[name='sex'][value='男']").prop("checked",true);
																}
																layui.form.render();//需要把表单提交在刷新一次 这时候需要在上面加入form表单的名字，看上面
																$("#usertel").val(data.userTel);
																$("#housename").val(data.houseName);
																$("#houseid").val(data.userDoorNO);
																$("#userdate").val(data.userDate);
																if(data.userState == '0'){
																	$("input[name='userstate'][value='禁用']").prop("checked",true);
																}
																else{
																	$("input[name='userstate'][value='启用']").prop("checked",true);
																}
																layui.form.render();//需要把表单提交在刷新一次 这时候需要在上面加入form表单的名字，看上面
																layer.open({
																	type : 1,//0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
																	title : '修改',
																	content : $('#v1'),//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
																	area: ['700px','600px'],
															})
															}
														});
												});
				</script>


			</div>
		</div>

		

		<div class="layui-footer">
			<!-- 底部固定区域 -->
			© layui.com - 底部固定区域
		</div>
	</div>
	<script>
		//JavaScript代码区域
		layui.use('element', function() {
			var element = layui.element;

		});
	</script>
	
	
	<!-- 临时DOM开始 -->
		<div id="v1" style="display: none;">
			<form class="layui-form" action="" lay-filter="example">
				<div class="layui-form-item">
					<label class="layui-form-label">ID</label>
					<div class="layui-input-block">
						<input type="text" name="userId" id="userId" lay-verify="title"
							autocomplete="off" readonly="readonly" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">用户名</label>
					<div class="layui-input-block">
						<input type="text" name="username" id="username"
							lay-verify="title" autocomplete="off" placeholder="请输入用户名"
							class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密码</label>
					<div class="layui-input-block">
						<input type="password" name="userpwd" id="userpwd" placeholder="请输入密码"
							autocomplete="off" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">性别</label>
					<div class="layui-input-block">
						<input type="radio" name="sex" value="男" title="男" checked="">
						<input type="radio" name="sex" value="女" title="女">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">联系电话</label>
					<div class="layui-input-block">
						<input type="text" name="usertel" id="usertel" lay-verify="title"
							autocomplete="off" placeholder="" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">公寓名称</label>
					<div class="layui-input-block">
						<input type="text" name="housename" id="housename" lay-verify="title"
							autocomplete="off" placeholder="" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">房间编号</label>
					<div class="layui-input-block">
						<input type="text" name="houseid" id="houseid" lay-verify="title"
							autocomplete="off" placeholder="" class="layui-input">
					</div>
				</div>
				
				
				<div class="layui-form-item">
					<label class="layui-form-label">入住时间</label>
					<div class="layui-input-block">
						<input type="text" name="userdate" id="userdate" lay-verify="title"
							autocomplete="off" placeholder="" class="layui-input">
					</div>
				</div>
				
				
				<div class="layui-form-item">
					<label class="layui-form-label">用户状态</label>
					<div class="layui-input-block">
						<input type="radio" name="userstate" value="禁用" title="禁用:0" checked="">
						<input type="radio" name="userstate" value="启用" title="启用:1">
					</div>
				</div>



				<div class="layui-form-item">
					<div class="layui-input-block">
						<button type="submit" class="layui-btn" lay-submit=""
							lay-filter="demo1">立即提交</button>
					</div>
				</div>
			</form>

		</div>
		<!-- 临时DOM结束 -->
	
</body>
</html>
